<div class="flex flex-col items-start">
    <!-- 设置标题 -->
    <div class="mb-6 w-full">
        <h1 class="text-3xl font-bold tracking-tight text-gray-900 ">{{ __('Settings') }}</h1>
        <p class="mt-2 text-base text-gray-500 mb-6">{{ __('Manage your profile and account settings') }}</p>
        <hr class="border-t border-gray-200 " />
    </div>

    <!-- 导航和内容水平对齐 -->
    <div class="flex w-full">
        <!-- 菜单 -->
        <div class="mr-10 w-[220px] flex-shrink-0">
            <nav class="flex flex-col space-y-1 rounded-md p-1">
                <a href="{{ route('settings.profile') }}" 
                   class="relative flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors {{ request()->routeIs('settings.profile') ? 'bg-neutral-100 text-neutral-900 ' : 'text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 ' }}" 
                   wire:navigate>
                    <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                    {{ __('Profile') }}
                </a>
                <a href="{{ route('settings.password') }}" 
                   class="relative flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors {{ request()->routeIs('settings.password') ? 'bg-neutral-100 text-neutral-900 ' : 'text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 ' }}" 
                   wire:navigate>
                    <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                    {{ __('Password') }}
                </a>
            </nav>
        </div>

        <!-- 内容区域 -->
        <div class="flex-1 self-stretch max-w-[calc(100%-250px)]">
            <h2 class="text-xl font-bold tracking-tight text-neutral-900 ">{{ $heading ?? '' }}</h2>
            <p class="mt-1 text-sm text-neutral-600 ">{{ $subheading ?? '' }}</p>

            <div class="mt-5 w-full max-w-lg">
                {{ $slot }}
            </div>
        </div>
    </div>
</div>
